<template>
  <ul class="movies">
    <li v-for="item in moviesList" :key="item._id">
      <img :src="formatUrl(item.img)" alt="" />
      <!-- <div class="content">
        <span class="content-nm">{{ item.nm }}</span>
        <div class="img-wrap">
          <div class="shadow1" v-if="item.score">观众评分:{{ item.score }}</div>
          <div class="shadow1" v-else>{{ item.wishNum }}人想看</div>
        </div>
      </div> -->
      <!-- <span class="right">预售</span> -->
      
    </li>
  </ul>
</template>
<script>
import { moviesApi } from "@/api/home.js";
export default {
  data() {
    return {
      moviesList: [],
    };
  },
  mounted() {
    this.getMoviesList();
  },
  methods: {
    async getMoviesList() {
      const res = await moviesApi();
      this.moviesList = res.result;
    },
    formatUrl(url) {
      return url.split("/w.h").join("/64.95");
    },
  },
};
</script>
<style lang="less" scoped>
.movies {
  margin-top: 10px;
  background-color: #fff;
  li {
    height: 114px;
    padding-left: 15px;
    border-bottom: 1px solid @border-color;
    // position: relative;
    // display: flex;
    &:last-child {
      border: 0;
    }
    img {
      width: 64px;
      height: 95px;
    }
    // .right {
    //   width: 54px;
    //   // height: 100%;
    //   position: absolute;
    //   right: 15px;
    //   line-height: 114px;
    //   text-align: center;
    //   font-size: @s-font;
    // }
    // .content {
    //   // height: 100px;
    //   // position: absolute;
    //   // left: 30%;
    //   // top: 0;
    //   flex: 1;
    //   margin-left: 15px;
    //   font-size: @s-font;
    // }
  }
}
</style>
